<script setup>
import { ref, onMounted } from "vue";
import { getRoleList, updateRole } from "@/api/role.js";
import { ElMessage } from "element-plus";
import {
  Check,
  Delete,
  Edit,
  Message,
  Search,
  Star
} from "@element-plus/icons-vue";
//引入路由
import { useRouter } from "vue-router";
const router = useRouter();
const tableData = ref([]);
//分页
const page = ref(1); // 当前页
const pageSize = ref(10); // 每页显示的条数
const total = ref(0); //// 总条数
// const searchKeyword = ref(""); //搜索关键字
//定义emp对象
let role = ref({
  role_id: "",
  role_name: "",
  role_status: null
});
const status = [
  {
    label: "启用",
    value: 1
  },
  {
    label: "关闭",
    value: 2
  }
];
//每页记录数变化
function chgsize(size) {
  //更改每页显示的条数
  pageSize.value = size;
  //从当前页开始
  page.value = 1;
  //重新查询数据
  initData();
}
//页面发生变化
function chgpg(pg) {
  //更改当前页
  page.value = pg;
  //重新查询数据
  initData();
}
//修改数据
function update(employee_id) {
  console.log("update:" + employee_id);
  router.push({
    path: "/emp/update",
    query: { employee_id }
  });
}
// 定义一个方法来更新account_status的值
const updateAccountStatus = async (row, status) => {
  // status: 1 启用 2 关闭
  console.log("updateAccountStatus", status, row.role_id);
  const updateData = {
    role_id: row.role_id,
    role_status: status
  };
  // role.value.role_status = status;
  // role.value.role_id = row.role_id;
  let res = await updateRole(updateData);
  if (res.code === 200) {
    ElMessage.success("状态修改成功");
    initData();
  }
  row.account_status = status;
};
// 查询数据
async function initData() {
  let data = {
    page: page.value,
    pageSize: pageSize.value,
    role_id: role.value.role_id,
    role_name: role.value.role_name,
    role_status: role.value.role_status
  };
  let res = await getRoleList(data);
  if (res.code === 200) {
    tableData.value = res.data.data;
    console.log(tableData.value);
    //接收分页信息
    page.value = res.data.page;

    pageSize.value = res.data.pageSize;

    total.value = res.data.total;
  }
}
// 生命周期
onMounted(() => {
  initData();
});
// 添加客户
function add() {
  // router.push("/emp/add");
}
// // 删除客户
// async function delEmp(employee_id) {
//   console.log("id:" + employee_id);

//   // 使用 ElMessageBox 显示确认弹框
//   ElMessageBox.confirm("确定要删除吗？", "删除", {
//     confirmButtonText: "确定",
//     cancelButtonText: "取消",
//     showCancelButton: false, // 不显示取消按钮
//     closeOnClickModal: true, // 点击模态框外部可以关闭
//     closeOnPressEscape: true // 按下 ESC 键可以关闭
//   })
//     .then(async () => {
//       // 用户点击确定后执行删除操作
//       const res = await deleteEmp(employee_id);
//       if (res.code === 200) {
//         ElMessage.success("删除成功");
//         initData();
//       }
//     })
//     .catch(() => {
//       // 用户点击取消或关闭弹框时不执行任何操作
//       console.log("删除操作已取消");
//     });
// }

//搜索
function handleSearch() {
  initData();
}
//重置
function handleReset() {
  role.value.role_name = "";
  role.value.role_status = null;
  initData();
}
</script>

<template>
  <div>
    <!-- 搜索框 -->
    <div>
      <el-form :inline="true" :model="role">
        <el-form-item label="角色名：">
          <el-input
            v-model="role.role_name"
            placeholder="请输入姓名或联系方式"
          />
        </el-form-item>
        <el-form-item label="角色状态" prop="role_status">
          <el-tree-select
            v-model="role.role_status"
            :data="status"
            :render-after-expand="false"
            style="width: 430px; margin-right: 0"
            @change="handleDepartmentChange"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSearch">查询</el-button>
          <el-button @click="handleReset">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <!-- 添加按钮 -->
    <div style="text-align: right; margin-right: 55px; margin-bottom: 15px">
      <el-button type="primary" @click="add">添加</el-button>
    </div>
    <el-table :data="tableData">
      <el-table-column
        prop="role_id"
        label="编号"
        width="80"
        header-align="center"
        align="center"
      />
      <el-table-column
        prop="role_name"
        label="角色名"
        width="100"
        header-align="center"
        align="center"
      />
      <el-table-column
        prop="careted_time"
        label="创建时间"
        header-align="center"
        align="center"
      />
      <el-table-column
        prop="role.role_status"
        label="账号状态(启用/关闭)"
        header-align="center"
        width="95"
        align="center"
      >
        <template #default="scope">
          <el-switch
            v-model="scope.row.role_status"
            :active-value="1"
            :inactive-value="2"
            @change="updateAccountStatus(scope.row, $event)"
          />
          <!-- active-text="启用" -->
          <!-- active-text="启用" inactive-text="关闭" -->
        </template>
      </el-table-column>
      <el-table-column label="操作" width="300" header-align="center">
        <template #default="scope">
          <el-button type="primary" @click="update(scope.row.employee_id)"
            >编辑</el-button
          >
          <el-button type="primary" @click="delEmp(scope.row.employee_id)"
            >删除</el-button
          ></template
        >
      </el-table-column>
    </el-table>

    <!-- //分页 -->
    <el-pagination
      background
      :page-size="pageSize"
      layout="total,sizes,prev, pager, next,jumper"
      :total="total"
      @size-change="chgsize"
      @current-change="chgpg"
    />
  </div>
</template>

<style scoped>
/* 根据需要添加样式 */
</style>
